<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
	<div class="credit-card-box hide float-left ui-widget-content ui-corner-all">
		<div class="title-bar ui-widget-header ui-corner-all float-left full-width padding-vertical-half no-border-all margin-bottom">
			<div class="name float-left padding-horizontal font-16 font-white sans-serif  bold ">Add a new credit card</div>
			<div class="cancel float-right padding-horizontal font-15 font-white bold pointer"><i class="icon-remove-sign icon-large"></i></div>
		</div>
		<form name="dms-add-credit-card-form" class="form formalize">
				<ul id="server-side-errMsg" class="margin-left-dbl margin-bottom font-13 bold errorMsg">
				</ul>
				<div class="errContainer font-12 errorMsg">
					<label for="credit-card-type" class="error"></label>
				</div>
				<div class="input-item">
		    		<label class="required"><fmt:message key="msg.credit-card"/> <fmt:message key="msg.type"/></label> 
					<select id="credit-card-type" name="payments.creditCard.creditCardType" size="1" class="float-left required">
						<option value="">Credit Card Type</option>
						<option value="AMEX">American Express</option>
						<option value="CTBL">Carte Blanche</option>
						<option value="DCLB">Diners Club</option>
						<option value="DISC">Discover</option>
						<option value="MSTR">Master Card</option>
						<option value="VISA">Visa</option>
					</select>
				</div>
				<div class="clear-both"></div>				
				<div class="errContainer font-12 errorMsg">
					<label for="credit-card-number" class="error"></label>
				</div>
				<div class="clear-both"></div>				
	    		<div class="input-item">
		    		<label class="required"><fmt:message key="msg.credit-card"/> <fmt:message key="msg.no"/></label> 
		    		<input type="text" value='' id="credit-card-number" name="payments.creditCard.accountNumber" class="text-field required creditcard" placeholder='<fmt:message key="msg.input-your"/><fmt:message key="msg.credit-card"/> <fmt:message key="msg.no"/>'/>
	    		</div>
				<div class="clear-both"></div>				
				<div class="errContainer font-12 errorMsg">
					<label for="credit-card-security-code" class="error"></label>
				</div>
				<div class="clear-both"></div>				
	    		<div class="input-item">
		    		<label class="required"><fmt:message key="msg.card-security-code"/></label> 
		    		<input type="text" value='' id="credit-card-security-code" name="payments.creditCard.securityCode" class="text-field required" placeholder='<fmt:message key="msg.card-security-code"/>'/>
	    		</div>
	    		<div class="clear-both"></div>
				<div class="errContainer font-12 errorMsg margin-top-half">
					<label for="expirationMonth" class="error"></label>
					<label for="expirationYear" class="error"></label>
	    		<div class="clear-both"></div>
				</div>
	    		<div class="input-item">
		    		<label class="required"><fmt:message key="msg.expiration-date"/></label> 
		    		<select name="expirationMonth" id="expirationMonth" class="text-field half-width  number required">
		    			<option value="">Month</option>
		    			<option value="01">01</option>
		    			<option value="02">02</option>
		    			<option value="03">03</option>
		    			<option value="04">04</option>
		    			<option value="05">05</option>
		    			<option value="06">06</option>
		    			<option value="07">07</option>
		    			<option value="08">08</option>
		    			<option value="09">09</option>
		    			<option value="09">09</option>
		    			<option value="10">10</option>
		    			<option value="11">11</option>
		    			<option value="12">12</option>
		    		</select> 
		    		<div class="float-left margin-horizontal margin-top font-16">/</div> 
		    		<jsp:useBean id="today" class="java.util.Date"  scope="request"/>
		            <fmt:formatDate value="${today}" type="date" dateStyle="full" pattern="yyyy" var="thisYear"/>
		    		<select name="expirationYear" id="expirationYear" class="text-field half-width  number required">
		    			<option value="">Year</option>
		    			<c:forEach begin="0" end="10" varStatus="status">
			    			<option value="${thisYear+status.index}">${thisYear+status.index}</option>
		    			</c:forEach>
		    		</select> 
	    		</div>
	    		<div class="clear-both"></div>				
				<div class="errContainer font-12 errorMsg">
					<label for="credit-card-name" class="error"></label>
				</div>
				<div class="clear-both"></div>	
	    		<div class="input-item">
		    		<label class="required"><fmt:message key="msg.name-on-card"/></label>
		    		<input type="text" value="" id="credit-card-name" name="payments.creditCard.nameAppearedOnCard" class="text-field required" placeholder='<fmt:message key="msg.name-on-card"/>' />
	    		</div>
	    		<div class="clear-both"></div>
	    		<input type="checkbox" value="sameAsInProfile" name="isBillingAddressSame" id="isBillingAddressSame"  class="billing-address-check float-left margin-horizontal" checked />
	    		<div class="text font-13 float-left">My billing address is the same as my address in Profile</div>
	    		<div class="clear-both"></div>
	    		<address class="billing-address margin-top">
					<div class="errContainer font-12 errorMsg">
						<label for="addressLine1" class="error"></label>
					</div>
					<div class="clear-both"></div>	
		    		<div class="input-item">
			    		<label class="required"><fmt:message key="msg.address-1"/></label>
			    		<input type="text" value="" id="addressLine1" name="payments.creditCard.billingAddress.addressLine1" class="text-field required" placeholder='<fmt:message key="msg.billing"/> <fmt:message key="msg.address"/>' ${param.mode}/>
		    		</div>
		    		<div class="input-item">
			    		<label><fmt:message key="msg.address-2"/></label>
			    		<input type="text" value="" name="payments.creditCard.billingAddress.addressLine2" id="addressLine2" class="text-field" placeholder='<fmt:message key="msg.billing"/> <fmt:message key="msg.address"/>' ${param.mode}/>
		    		</div>
					<div class="clear-both"></div>	
					<div class="errContainer font-12 errorMsg">
						<label for="city" class="error"></label>
					</div>
					<div class="clear-both"></div>	
		    		<div class="input-item">
			    		<label class="required"><fmt:message key="msg.city"/></label>
			    		<input type="text" value="" id="city" name="payments.creditCard.billingAddress.city" class="text-field required" placeholder='<fmt:message key="msg.billing"/> <fmt:message key="msg.city"/>' ${param.mode}/>
		    		</div>
					<div class="clear-both"></div>	
					<div class="errContainer font-12 errorMsg">
						<label for="state" class="error"></label>
					</div>
					<div class="clear-both"></div>	
		    		<div class="input-item">
			    		<label class="required"><fmt:message key="msg.state"/></label>
			    		<input type="text" value="" id="state" name="payments.creditCard.billingAddress.state" class="text-field required" placeholder='<fmt:message key="msg.billing"/> <fmt:message key="msg.state"/>' ${param.mode}/>
		    		</div>
					<div class="clear-both"></div>	
					<div class="errContainer font-12 errorMsg">
						<label for="zip" class="error"></label>
					</div>
					<div class="clear-both"></div>	
		    		<div class="input-item">
			    		<label class="required"><fmt:message key="msg.zip-code"/></label>
			    		<input type="text" value="" id="zip" name="payments.creditCard.billingAddress.zip" class="text-field digits required" minlength="5" maxlength="5" placeholder='<fmt:message key="msg.billing"/><fmt:message key="msg.zip-code"/>' ${param.mode}/>
		    		</div>
	    		</address>
	    		<div class="clear-both"></div>		
				<div class="input-item margin-horizontal-dbl margin-vertical">
						<div class="block submit margin-left-half font-white btn btn-info float-left"> 
							<span>Apply</span>
						</div>
						<div class="block margin-left-half btn float-left reset"> 
							<span>cancel</span>
						</div>
	    			</div>
		</form>	
	</div>	    		
